<!-- Button trigger modal -->
@mobile
<a href="{{route('edu.front.subscribe.wepay',$subscribe)}}" class="btn btn-outline-info" data-toggle="modal" >
    微信付款
</a>
@endmobile
@desktop
    <button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#exampleModal{{$subscribe['id']}}">
        微信付款
    </button>
@enddesktop
<!-- Modal -->
<div class="modal fade" id="exampleModal{{$subscribe['id']}}" tabindex="-1" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <span class="d-block text-center h5 pt-3">
                    订单金额{{$subscribe['price'] }}元
                </span>
                <img data-url="{{route('edu.front.subscribe.wepay',$subscribe)}}">

            </div>
            <div class="d-block text-center pd-3">
                <span class="d-block">
                请使用手机微信扫码支付
                </span>
                {{--                可以跳转至订单页面--}}
                <div class="btn-group" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-success btn-sm"
                            onclick="reloadQr('exampleModal{{$subscribe['id']}}')">重新生成
                    </button>
                    <a href="{{route('home')}}" class="btn btn-outline-info btn-sm">完成支付</a>
                </div>
            </div>
        </div>
    </div>
</div>
@push('afterjs')
    <script>

        $("#exampleModal{{$subscribe['id']}}").on('show.bs.modal', function (e) {
            //e.target 触发对象
            const img = e.target.querySelector('img');
            img.src = img.dataset.url;
        })

        //重新加载图片，原理，为图片地址后面加查询参数?'sfefefe23',使地址改变，让浏览器重新加载
        function reloadQr(id) {
            const modal = document.querySelector("#" + id);
            const img = modal.querySelector('img');
            img.src = img.dataset.url + '?_' + Math.random();
        }
    </script>
@endpush
